import { useState } from 'react';
import { useDispatch } from 'react-redux';

// 导入 action 生成器
import { addTodo } from '../store/actions/todos';

export const TodoHeader = () => {
  // 组件输入的状态
  const [txt, setTxt] = useState('');
  // 创建 dispatch
  const dispatch = useDispatch();

  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="What needs to be done?"
        value={txt} // 受控组件：1、控制表单的显示
        onChange={(e) => setTxt(e.target.value)} // 受控组件：2、控制表单的值变化
        onKeyDown={(e) => {
          // console.log(e);
          // 判断用户点击的是否是回车
          if (e.key === 'Enter') {
            if (!txt.trim()) {
              setTxt('');
              return;
            }
            console.log('准备发送 新建todo，action');
            // 发起网络请求
            // 1、const res = axios.post('xxxx', {todo: txt})
            // 2、等待服务器响应结果：服务器保存成功，{todo: txt}
            // 3、创建action addTodo(res.txt);
            // const action = addTodo(txt.trim());
            // console.log('发送的 新建todo，action', typeof action, action);
            dispatch(addTodo(txt.trim()));

            // 添加todo后清空输入
            setTxt('');
          }
        }}
        autoFocus
      />
    </header>
  );
};
